<template>
    <div class="login-container">
        <h1>后台管理系统</h1>
        <!-- 头像区域 -->
        <div class="text-center avatar-box">
            <img src="../../assets/images/logo.png" alt="">
        </div>
        <!-- 表单区域 -->
        <div class="form-login p-5">
            <!-- 登录名称 -->
            <div class="form-group form-inline">
                <i class="icon1"></i>
                <label for="username">登录名称</label>
                <input id="username" type="text" placeholder="请输入登录名称" class="form-control ml-2" autocomplete="off"
                    v-model.trim="username" />
            </div>
            <!-- 登录密码 -->
            <div class="form-group form-inline">
                <i class="icon2"></i>
                <label for="password">登录密码</label>
                <input id="password" type="password" placeholder="请输入登录密码" class="form-control ml-2" autocomplete="off"
                    v-model.trim="password" />
            </div>
            <!-- 登录注册按钮 -->
            <div class="btns">
                <button class="btn btn-success mi-btn mr-2" type="button" @click="topath">登录</button>
                <button class="btn btn-primary mi-btn" type="button">注册</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "myLogin",
    data() {
        return {
            username: "",
            password: ""
        }
    },
    methods: {
        topath() {
            if (this.username === "admin" && this.password === "123") {
                // 编程是导航
                this.$router.push("/main");
                localStorage.setItem("token", "Bearer xxx");
                return alert("登陆成功,即将跳回首页")
            } else {
                localStorage.removeItem("token")
            }
        }
    }
}
</script>

<style lang="less" scoped>
.login-container {
    position: relative;
    padding: 30px;
    width: 100%;
    height: 802px;
    background: url("../../assets/images/bck.png") no-repeat;
    background-size: 100% auto;

    h1 {
        text-align: center;
        margin: 20px auto;
        font-size: 40px;
        font-weight: bold;
        color: rgba(39, 38, 38, 0.485);
    }

    .avatar-box {
        img {
            position: absolute;
            top: 180px;
            left: 450px;
            z-index: 999;
            width: 180px;
            height: 160px;
            border-radius: 50%;
        }

    }

    /* 表单样式 */
    .form-login {
        position: absolute;
        top: 300px;
        left: 300px;
        width: 500px;
        height: 300px;
        background: #b6b3b3;
        box-shadow: 10px 10px 20px rgb(20, 20, 20);

        .form-group {
            position: relative;
            margin-top: 20px !important;
            border-radius: 20px;

            i {
                position: absolute;
                top: 5px;
                left: 70px;
                display: inline;
                width: 35px;
                height: 30px;
                background: url("../../assets/images/pwd-icons-new.png") no-repeat left top;
                background-position-y: -5px;
            }

            .icon2 {
                background-position-x: -48px;
                background-position-y: -2px;
            }

            label {
                display: inline-block;
                width: 60px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                background-color: #0732df;
                color: #fff;
            }

            input {
                width: 300px;
                padding-left: 40px;
            }
        }

        .btns {
            width: 300px;
            margin: 40px auto;
            display: flex;
            justify-content: space-around;

            .mi-btn {
                width: 100px;
                height: 50px;
            }
        }
    }
}
</style>